<template>
  <div class="myinformation">
    <!-- 个人资料 -->

    <van-nav-bar
      title="编辑资料"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
      fixed
      placeholder
    />

    <!-- <input type="text" /> -->

    <div class="main">
      <div class="form">
        <div class="wrapper">
          <div class="input-data">
            <input type="text" v-model="userMessage.user_name" required />

            <div class="underline"></div>
            <label>昵称</label>
          </div>
        </div>

        <div class="wrapper">
          <div class="input-data">
            <input type="text" v-model="userMessage.user_sex" required />
            <div class="underline"></div>
            <label>性别</label>
          </div>
        </div>

        <div class="wrapper">
          <div class="input-data">
            <input type="text" v-model="userMessage.user_birthday" required />
            <div class="underline"></div>
            <label>生日</label>
          </div>
        </div>

        <div class="wrapper">
          <div class="input-data">
            <input type="text" v-model="userMessage.user_describe" required />
            <div class="underline"></div>
            <label>个人标签</label>
          </div>
        </div>

        <!-- <Input value="昵称"></Input>
        <Input value="性别"></Input>
        <Input value="生日"></Input>
        <Input value="签名"></Input> -->
      </div>
    </div>

    <div class="fix">
      <div class="confim" @click="userMsgFix"><span>修改</span></div>
      <div class="cancel"><span>取消</span></div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant"
import { mapMutations, mapState } from "vuex"
import Input from "@/views/My/Input"
export default {
  name: "myinformation",
  components: {
    Input,
  },
  data() {
    return {
      searchResult: [],
      userMessage: {},
    }
  },

  mounted() {
    // 接受参My组件路由传过来的参数
    // 这里有个bug，再次刷新后数据都消失，初步判断数据格式问题，后期修复
    console.log(this.$route.query)
    this.userMessage = this.$route.query.userInfo
    console.log(this.userMessage)
  },
  methods: {
    onClickLeft() {
      this.$router.push("/my")
    },
    onClickRight() {
      Toast("按钮")
    },

    // 修改个人资料的逻辑
    userMsgFix() {
      console.log(this.userMessage)
      let params = this.userMessage
      this.$api.my.personalData(params).then((res) => {
        console.log(res)
        let User = JSON.parse(localStorage.getItem("UserShopInfo"))
        let newValue = {
          user_name: res.data[0].user_name,
          user_sex: res.data[0].user_sex,
          user_birthday: res.data[0].user_birthday,
          user_describe: res.data[0].user_describe,
        }
        Object.assign(User.data[0], newValue)
        localStorage.setItem("UserShopInfo", JSON.stringify(User))
      })
    },

    ...mapMutations(["userInit"]),
  },

  computed: {
    ...mapState({
      loginStatus: (state) => state.user.loginStatus,
      userInfo: (state) => state.user.userInfo,
    }),
  },
}
</script>

<style lang="less" scoped>
.myinformation {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
}
header {
  // position: sticky;
  z-index: inherit;
}
.main {
  position: relative;
  width: 100%;
  height: 100%;

  background-color: #f7f8fa;
  // z-index: 0;

  .form {
    position: absolute;
    margin: 40px 10px 0px 10px;
    width: 100%;
    height: 100%;
    border-radius: 30px;
  }
}

.fix {
  margin-top: 3.125rem /* 50/16 */;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .confim,
  .cancel {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 1.125rem /* 18/16 */;
    width: 300px;
    height: 3.4375rem /* 55/16 */;
    margin-bottom: 1.5625rem /* 25/16 */;
    // background-color: #f7f8fa;
    border-radius: 1.875rem /* 30/16 */;
  }
  .confim {
    background-color: #ee0a24;
  }
  .cancel {
    background-color: rgb(211, 206, 206);
  }
}

.wrapper {
  // width: 100%;
  background-color: #fff;
  /* 内边距（上下左右） */
  padding: 15px;
  /* 盒子阴影 */
  // box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  /* 圆角 */
  // border-radius: 8px;
}
.wrapper .input-data {
  /* 相对定位 */
  position: relative;
  width: 100%;
  height: 40px;
}
.wrapper .input-data input {
  width: 100%;
  height: 100%;
  border: none;
  font-size: 17px;
  border-bottom: 2px solid #c0c0c0;
}
/* 输入框获得焦点时 */
.wrapper .input-data input:focus ~ label,
/* 输入框的值为合法时 */
.wrapper .input-data input:valid ~ label {
  /* label上移，同时改变字号、字体颜色 */
  transform: translateY(-25px);
  font-size: 15px;
  color: #2c6fdb;
}
.wrapper .input-data label {
  /* 绝对定位 */
  position: absolute;
  bottom: 10px;
  left: 0px;
  color: #808080;
  /* 这个属性可以使点击label穿透到输入框 */
  pointer-events: none;
  /* 现在动画有点生硬，在这里需要给动画加个过渡 */
  transition: all 0.3s ease;
}
.wrapper .input-data .underline {
  position: absolute;
  bottom: 0px;
  height: 2px;
  width: 100%;
  background-color: #2c6fdb;
  /* 沿X轴缩小 */
  transform: scaleX(0);
  /* 这里同样给动画加个过渡 */
  transition: all 0.3s ease;
}
.wrapper .input-data input:focus ~ .underline,
.wrapper .input-data input:valid ~ .underline {
  /* 沿X轴放大 */
  transform: scaleX(1);
}
</style>
